<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
	</head>
	<body>
		<!-- 添加窗体 -->
		<div id="addRole" style="display: none">
			<form class="layui-form" id="my_question">
				<div class="layui-form-item">
					<label class="layui-form-label">角色名</label>
					<div class="layui-input-inline">
						<input type="text" id="addname" name=""autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn layui-btn-warm"
							onclick="saveAddRoleBtn()">保存</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>	
		<!-- 修改窗体 -->
	<div id="updateRole" style="display: none">
		<form class="layui-form"  lay-filter="fm">
			<div class="layui-form-item">
				<label class="layui-form-label">角色名</label>
				<div class="layui-input-inline">
					<input type="text" id="updatename" name="roleNames"autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色ID</label>
				<div class="layui-input-inline">
					<input type="text" id="updateid" name="uid"autocomplete="off" disabled="disabled" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-warm" onclick="saveUpdateRoleBtn()">保存</button>
				</div>
			</div>
		</form>
	</div>
		<!-- 数据表格 -->
		<div class="layuimini-container">
			<div class="layuimini-main">
			<div class="layui-card-body layui-admin-card-body">
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
			</div>
		</div>
		<!-- 弹出设置的树形窗体 -->
		<div id="opertreewin" style="display:none;">
			<div style="height: 100%">
			    <div style="height: 100%">
			        <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
			            <div class="layui-row layui-col-space15">
			                <div class="layui-col-md10">
			                    <div class="layui-card">
										<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">保存</button>
			                        <div class="layui-card-body" id="toolbarDiv">
			                            <ul id="test1" class="dtree" data-id="0"></ul>
			                        </div>
									
			                    </div>
			                </div>
			            </div>
			        </div>
			    </div>
			</div>
				
		</div>
		
		<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-group" >
			<input class="layui-btn layui-btn-normal layui-btn-radius" type="button" value="添加" onclick="addRoleBtn()"/>
		</div>
		</script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="oper">设置</a>
		</script>
		<script type="text/javascript">
			var globalUrl = window.localStorage.getItem("globalUrl");
			var token = window.localStorage.getItem("token");
			var tableObj,index,uindex,ids;
			
			layui.use(['element','layer','laydate','form','tree','util','table'],function(){
							var element = layui.element;
							var $ = layui.jquery;
							var form = layui.form;
							var table = layui.table;
							var laydate = layui.laydate;
							var layer = layui.layer;
							var tree = layui.tree;
							var util = layui.util;
							
							laydate.render({
								elem:"#begin"
							})
							laydate.render({
								elem:"#end"
							})
							
				/* 渲染数据表格 */
				tableObj=table.render({
				  elem: '#test'
				  ,toolbar: '#toolbarDemo'
				  ,url:'/api/GetRolesLayUI'
				  ,method:'post'
				  ,where:{
					uid:'',
					token:token
					}
				  ,title: '角色数据表'
				  ,cols: [[
					{type: 'checkbox', fixed: 'left'}
					,{field:'uid', title:'ID', fixed: 'left', unresize: true, sort: true}
					,{field:'roleNames', title:'角色名', sort: true}
					,{field:'RowNum', title:'总页数',sort: true}
					,{fixed: 'right', title:'操作',  width:169,toolbar: '#barDemo',fixed: 'right' }
				  ]]
				  ,page: true
				});
				//监听行工具事件
				table.on('tool(test)', function(obj){
					var data = obj.data;
					var rid = data.uid;
					if(obj.event === 'del'){
					//console.log("删除");
					layer.confirm('真的删除行么', function(index){
						$.post('/api/DeleteRole',{
							roleId:rid,
							token:token
						},function(res){
							if(res.success){
								layer.msg("删除成功",{icon: 6});
								tableObj.reload();
							}else{
								layer.msg("删除失败",{icon: 5});
								tableObj.reload();
							}
						},"json");
					  layer.close(index);
					});
					} else if(obj.event === 'edit'){
			    	  form.val('fm',data);
					    uindex= layer.open({
					    	//form.val('fm',data);
					    	 type:1
					    	 ,title:"角色信息修改"
					    	 ,content:$("#updateRole")
					    	 ,area:["369px","330px"]
						})
					}else if(obj.event === 'oper'){
						$.post('/api/GetModulesByRoleIdLayUI',{
							roleId:rid,
							token:token
						},function(res){
							tree.render({
								elem: '#test1' //默认是点击节点可进行收缩
								,showCheckbox: true  //是否显示复选框
								,id: 'demoId1'
								,accordion:true
								,data: res
							})
						},'json')
						//onsole.log("设置")
						layer.open({
								type:1
								,title:"为"+data.roleNames+"角色设置模块",
								content:$("#opertreewin")
								,area:["369px","369px"]
						})
						
						
					}
			//点击模块保存
			util.event('lay-demo', { 
				getChecked: function(othis){
				      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
				      //console.log(checkedData);
					  //循环父类
					  ids = "";
					  for(var i = 0;i<checkedData.length;i++){
						  if(ids==""){
							  ids+=checkedData[i].id;
						  }else{
							  ids+=","+checkedData[i].id;
						  }
						  var children = checkedData[i].children;
						  console.log(children);
						  //循环子类
						  for(var j = 0;children.length>j;j++){
							  ids +=","+children[j].id;
						  }
					  }
					  $.post('/api/SetSysRights',{
						  parentIds:ids,
						  rId:rid,
						  token:token
					  },function(res){
						  if(res.success){
						  	layer.msg("操作成功",{icon: 1});
							//刷新他的上一级
							//window.top.location.reload();
						  }else{
						  	layer.msg("操作失败"+res.message,{icon: 2});
							window.top.location.reload();
						  }
					  },'json')
				    }
			})
				})
				
	
			})
			
			
			//点击修改保存
			   function saveUpdateRoleBtn(){
				var updateid = $("#updateid").val();
			   	var updatename = $("#updatename").val();
			   	 if(updatename==""){
			   		 layer.msg("角色名不能为空");
			   	}else{
			   	 	$.post('/api/UpdateRole',{
						roleId:updateid,
						name:updatename,
			   	 		token:token
				   	},function(res){
				   		if(res.success){
				   			//关闭窗体
							layer.msg("修改成功",{icon: 6});
				  			layer.close(uindex);
				  			tableObj.reload();
				   		}else{
							layer.msg("修改失败",{icon: 5});
						}
				   	},"json");
			   	}
			  
			   }
			//点击添加按钮
			function addRoleBtn(){
				layui.use("layer",function(){
					var layer = layui.layer;
					index = layer.open({
						type:1
						,title:"添加角色信息",
						content:$("#addRole")
						,area:["369px","330px"]
				})
				})
			}
			//点击添加保存
			   function saveAddRoleBtn(){
			   	var addname = $("#addname").val();
			   	 if(addname==""){
			   		 layer.msg("角色名不能为空");
			   	}else{
			   	 	$.post('/api/CreateRole',{
			   	 		name:addname,
			   	 		token:token
				   	},function(res){
				   		if(res.success){
							$("#my_question")[0].reset();
				   			//关闭窗体
							layer.msg("添加成功",{icon: 6});
				  			layer.close(index);
				  			tableObj.reload();
				   		}else{
							layer.msg("添加失败",{icon: 5});
						}
				   	},"json");
			   	}
			  
			   }
		</script>
	</body>
</html>
